<template>
	<view class="task-position-home-app" style="height: 100%;">
		<view class="user-app" style="height:100%;">
			<view class="search-part" style="display: flex;padding-bottom:20upx;">
				<view class="search-option" style="height:60upx;border-radius:10upx;flex:1">
					<image src="../../../static/search-icon.png" style="width:48upx;margin-left:20upx;" mode="aspectFit"/>
					<input @input="searchByName" class="keyword-input" v-model="searchOption.keyword" style="flex:1;" />
					<text style="margin-right:20upx;">搜索</text>
				</view>		
				<!--
				<image src="../../../static/add.png" @click="showAddDialog" style="width:48upx;height: 48upx;margin-right:20upx;margin-top:5upx;" mode="aspectFit"/>
				-->
			</view>
			
			<view class="list-items">
				<view class="empty" v-if="listData.items.length==0" style="text-align: center;margin:10upx;color:#333;padding:30upx;">暂无数据</view>
				<!--
				{"data":[{"email":"845426445@qq.com","idNO":"365879545425","joinTime":"2020-12-07 19:34:41","level":0,"money":0,"name":"张三","phone":"13548752658","remark":"备注",
				-->
				<view class="list-item" v-if="item.show" v-for="(item,key) in listData.items" :key="key" >
					<view class="info">
						<view class="title">{{item.name}}</view>
						<view class="remark">电话：{{item.phone}}</view>
						<view class="remark">邮箱：{{item.email}}</view>
						<view class="remark">备注：{{item.remark}}</view>
						<view class="remark">加入时间：{{item.joinTime}}</view>
					</view>
					<!--
					<view class="manger">
						
						<view class="btn btn-primary" @click="goPage('/pages/tea/machine/edit?id='+item.machineId)">编辑</view>
						
						<view class="btn btn-error" @click="deleteItem(item)">删除</view>
					</view>
					-->
				</view>
			</view>
			<!--
			<view class="search-part">
				<view class="search-option" style="height:60upx;border-radius:10upx;">
					<image src="../../../static/search-icon.png" style="width:48upx;" mode="aspectFit"/>
					<text>搜索</text>
				</view>
				<view class="tabs" style="display: flex;margin-top:20upx;">
					<view class="tab-item" :class="{selected:(tabItem.value==tabItemValue)}" v-for="(tabItem,tabItemKey) in tabItems" @click="tabClick(tabItem)"
					 :key="tabItemKey">{{tabItem.label}}</view>
				</view>
			</view>
			-->
		</view>

		<!--
		<view class="button">确认提交</view>
		-->
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	import util from '@/libs/util.js'
	
	export default {
	    data() {
	        return {
				isLogin: false,
				tabItemValue: 0,
				searchOption: {
					keyword: ''
				},
				addDialog: {
					show: false
				},
				formSearchOptions: {
					teaHouseList: [],
					machineTypeList: [
					  {value: 0, label: '门锁'},
					  {value: 1, label: '储物柜'},
					  {value: 2, label: '售货柜'}
					],
				},
				teaHouseId: '',
				listData: {
					items: [
					]
				}
	        }
	    },
		onLoad(params) {
			console.log(params);
			this.teaHouseId = params.teaHouseId
		},
		onShow() {
			/*
			if (global.isLogin()) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
			*/

			//global.loginByCode();
			//this.getHomeData()
			this.getDataList();
		},
		components: {
			wPicker
		},
		computed: {
			/*
			dateRangeValue() {
				return [this.homeData.startDate, this.homeData.endDate]
			}
			*/
		},
	    methods: {
			...util,
			showAddDialog() {
				this.goPage("/pages/tea/machine/edit?teaHouseId="+this.teaHouseId);
			},
			searchByName(event) {
				let name = event.target.value;
				if (name && name.length > 0) {
					
					for(let i = 0; i < this.listData.items.length; i++) {
						//console.log(this.listData.items[i]);
						let index = this.listData.items[i].roomName.indexOf(name);
						if (index!=-1) {
							this.listData.items[i].show = true;
						} else {
							this.listData.items[i].show = false;
						}
					}
				} else {
					this.setField(this.listData.items, 'show', true);
				}
			},
			tabClick(item) {
				this.tabItemValue = item.value
				//console.log("tabItem");
				this.getDataList();
			},
			getDataList() {
				uni.showLoading({
					title: '加载中'
				});
				this.$api.post('/user/queryPage',
					{
						teaHouseId: this.teaHouseId,
						pageNo: 1
					}
				).then((response) => {
					//for(let i = 0; i )
					response.data.items = this.setField(response.data, 'show', true);
					

					
					//console.log(response.data.items);
					this.listData.items = response.data
					/*
					for(let i = 0; i < this.listData.items.length; i++) {
						//console.log(this.listData.items[i]);
						this.listData.items[i]['machineTypeLabel'] = this.getLabelFromOptions(this.formSearchOptions.machineTypeList, this.listData.items[i]['machineType']);
					}
					*/
					uni.hideLoading()
				});
			},
			deleteItem(item) {
				uni.showModal({
				    title: '提示',
				    content: '确定删除？',
				    success:  (res) => {
				        if (res.confirm) {
							this.$api.post('/machine/del',
								{
									machineId: item.machineId
								}
							).then((response) => {
							   this.$Message.success('删除成功');
							   this.getDataList()
							});
				        } else if (res.cancel) {
				            //console.log('用户点击取消');
				        }
				    }
				});
				
			},
			goPage(url) {
				uni.navigateTo({url: url})
			},
			
	    }
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.task-position-home-app{
		background-color: #F5F4F8;
		height: 100%;
		.login-button{
			background-color:#108EE9;
			margin-bottom: 20upx;
			width:90%;
			padding:20upx;
			text-align: center;
			margin:0 auto;
			color:white;
			margin-top:40upx;
			margin-bottom:20upx;
			border-radius: 10upx;
		}

		.search-part{
			position: fixed;
			/*top:0;*/
			width:100%;
			background-color: #F5F4F8;
			.search-option-input{
				.keyword-input{
					
				}
			}
			
			.search-option{
				background-color: white;
				margin:0 20upx;
				color:#BBBBBB;
				display: flex;
				/*justify-content: center;*/
				align-items: center;
			}
			.tabs{
				border:1px solid #108EE9;
				border-right:none;
				margin:0 20upx;
				border-radius: 5upx;
				width:calc(100% - 40upx);
				background-color: white;
				.tab-item{
					text-align: center;
					width:33%;
					padding: 8upx;
					color:#108EE9;
					border-right:1upx solid #108EE9;
				}
				.selected{
					background-color: #108EE9;
					color:white;
				
				}
			}
		}
		
		.list-items{
			padding-top:50upx;
			background-color: #F5F4F8;
			.list-item{
				background-color: white;
				margin:30upx 0;
				display: flex;
				flex-direction: column;
				padding:20upx;
				.manger{
					/*display: flex;*/
					margin-top:20upx;
					text-align: right;
					.btn{
						margin-right:20upx;
						display: inline-block;
					}
				}
				
				.icon{
					margin:10upx;
				}
				.info{
					margin-top:10upx;
					.title{
						margin-bottom:30upx;
					}
					.remark{
						font-size: 28upx;
						margin-top:-10upx;
						color:#ccc;
					}
					.detail{
						font-size:28upx;
					}
				}
			}
		}
	}
	
</style>
